CSS Text
In this tutorial you will learn how to style text on your web pages using CSS. CSS provides several properties that allows you to define various text styles such as color, alignment, spacing, decoration, transformation, etc. very easily and effectively.
Text color
The color property sets the color of text by using either one of the color notations.
Example: Try It
p { color: blue; }
Text-transform
Text-transform controls text casing. Possible values are inherit, none, uppercase, lowercase, and capitalize, with none as the initial value.
Example: Try It
h1 { text-transform: uppercase; }
Text-decoration
One or more visual effects to text can be added with the text-decoration property. This property typically accepts one of the following values: underline, overline, line-through, and none.
Example: Try It
h1 { text-decoration: overline; }
Text-indent
The first line of text in a block element can be indented with the text-indent property. It can be set to a unit of measure or a percentage of the parent element’s width. Text can also be indented backward by using a negative value.
Example: Try It
p { text-indent: 100px; }
Text-align
The text content of a block element can be aligned with the text-align property. Text can be aligned in four ways: to the left, right, centre or justified (straight left and right margins).
Example: Try It
h1 { text-align: center; }
Text-Drection
The writing direction of text can be switched with the direction property. The default value is ltr, meaning left-to-right. It can be changed to rtl to make text content within a block element flow to the right.
Example: Try It
h1 { direction:rtl; }
Text-shadow
A shadow effect can be added to text with the text-shadow property.
The shadow is defined using two offset values, followed by two optional values for the blur radius and color. The x and y offsets are specified as length
values relative to the text. Positive values move the
shadow right and down; negative values move it left and up.
Example: Try It
h1 { text-shadow: 2px -1px 2px red; }
Line Height
The line-height property is used to set the height of the text line. The value of this property can be a number, a percentage (%), or a length in pixels, ems, etc. The following example sets line height to 1.5 times font size.
Example: Try It
p { line-height: 2.5; }
Word-spacing
Word-spacing sets the spacing between words.
Example: Try It
p { word-spacing: 20px; }
Line-spacing
Line-spacing sets the spacing between lines.
Example: Try It
p { line-spacing: 20px; }